<template>
  <div>
    <!-- <el-card id="table-head-block">
      <b>项目管理</b>
    </el-card> -->
    <el-card id="table-block">
      <el-table :data="tableData"
                :row-class-name="tableRowClassName"
                ref="filterTable"
                style="width: 100%">
        <el-table-column label="项目ID"
                         width="200">
          <template slot-scope="scope">
            <i class="el-icon-folder"></i>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名称"
                         width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.note }}
          </template>
        </el-table-column>
        <el-table-column width="180"
                         align="center"
                         :filters="[{text: '已结项', value: '1'}, {text: '未结项', value: '0'}]"
                         :filter-method="filterHandler"
                         filter-placement="bottom-end">
          <template slot="header"
                    slot-scope="scope">
            <el-tooltip v-if="$store.state.rights"
                        content="新建项目"
                        placement="top"
                        effect="light">
              <img id="add-img"
                   src="@/assets/add.png"
                   @click.stop="addProject" />
            </el-tooltip>
            <span>操作</span>
          </template>
          <template slot-scope="scope">
            <el-button v-if="$store.state.rights"
                       size="mini"
                       plain=""
                       icon="el-icon-edit-outline"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="scope.row.isover"
                       size="mini"
                       type="success"
                       plain=""
                       icon="el-icon-folder-checked"
                       @click="handleDelete(scope.$index, scope.row)">完成</el-button>
            <el-button v-else
                       size="mini"
                       type="primary"
                       plain=""
                       icon="el-icon-folder-opened"
                       @click="handleComplete(scope.$index, scope.row)">结项</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="新建项目"
               :visible.sync="editDialogVisile"
               width="50%"
               center>
      <el-form ref="form"
               :model="project"
               label-width="80px">
        <el-form-item label="项目ID">
          <el-input v-model="project.id" placeholder="不大于32字符" :disabled="this.thisPriject >= 0"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="project.name" placeholder="不大于32字符"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea"
                    v-model="project.note" placeholder="不大于50字符"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editDialogVisile = false">取 消</el-button>
        <el-button type="primary"
                   @click="update">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [
        {
          id: "1",
          name: "2016-05-02",
          note: "上海市普陀区金沙江路 1518 弄",
          isover: false
        },
        {
          id: "2",
          name: "2016-05-02",
          note: "上海市普陀区金沙江路 1518 弄",
          isover: false
        },
        {
          id: "3",
          name: "2016-05-02",
          note: "上海市普陀区金沙江路 1518 弄",
          isover: true
        },
        {
          id: "4",
          name: "2016-05-02",
          note: "上海市普陀区金沙江路 1518 弄",
          isover: false
        }
      ],
      editDialogVisile: false,
      project: {
        id: "4",
        name: "2016-05-02",
        note: "上海市普陀区金沙江路 1518 弄",
        isover: false
      },
      thisPriject: 0
    };
  },
  methods: {
    addProject() {
      this.editDialogVisile = true;
      this.project = {
        id: "",
        name: "",
        note: "",
        isover: false
      };
      this.thisPriject = -1;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.editDialogVisile = true;
      this.project = {
        id: row.id,
        name: row.name,
        note: row.note,
        isover: row.isover
      };
      this.thisPriject = index;
    },
    update() {
      this.editDialogVisile = false;
      if (this.thisPriject >= 0) {
        this.$api.project
          .updateProjects({
            id: this.project.id,
            name: this.project.name,
            note: this.project.note,
            isover: this.project.isover
          })
          .then(response => {
            if (response.data) {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.$set(
                this.tableData[this.thisPriject],
                `id`,
                this.project.id
              );
              this.$set(
                this.tableData[this.thisPriject],
                `name`,
                this.project.name
              );
              this.$set(
                this.tableData[this.thisPriject],
                `note`,
                this.project.note
              );
              this.$set(
                this.tableData[this.thisPriject],
                `isover`,
                this.project.isover
              );
            } else {
              this.$message({
                type: "error",
                message: "修改失败"
              });
            }
            // this.tableData = response.data;
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "修改失败"
            });
          });
      } else {
        if (this.project.name == "") {
          this.$message({
            type: "error",
            message: "请输入正确的项目名"
          });
          return;
        }
        if (this.project.id == "") {
          this.$message({
            type: "error",
            message: "请输入正确的项目ID"
          });
          return;
        }
        if (this.project.id.length > 32) {
          this.$message({
            type: "error",
            message: "项目ID过长，请小于32字符"
          });
          return;
        }
        if (this.project.name.length > 32) {
          this.$message({
            type: "error",
            message: "项目ID过长，请小于32字符"
          });
          return;
        }
        if (this.project.note.length > 50) {
          this.$message({
            type: "error",
            message: "项目ID过长，请小于50字符"
          });
          return;
        }
        this.$api.project
          .insertProject({
            id: this.project.id,
            name: this.project.name,
            note: this.project.note
          })
          .then(response => {
            if (response.data) {
              this.$message({
                type: "success",
                message: "新建成功"
              });
              this.findProjects();
            } else {
              this.$message({
                type: "error",
                message: "新建失败"
              });
            }
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "新建失败"
            });
          });
      }
    },
    handleComplete(index, row) {
      if (this.$store.state.rights) {
        console.log("结项：", index, row);
        this.$confirm("是否确认结项?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api.project
              .updateProjects({
                id: row.id,
                name: row.name,
                note: row.note,
                isover: true
              })
              .then(response => {
                if (response.data) {
                  this.$message({
                    type: "success",
                    message: "结项成功"
                  });
                  this.$set(this.tableData[index], `isover`, true);
                } else {
                  this.$message({
                    type: "error",
                    message: "结项失败"
                  });
                }
                // this.tableData = response.data;
              })
              .catch(error => {
                this.$message({
                  type: "error",
                  message: "结项失败"
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleDelete(index, row) {},
    tableRowClassName({ row, rowIndex }) {
      if (row.isover) {
        return "success-row";
      }
      return "";
    },
    filterHandler(value, row, column) {
      console.log("工:", row.isover, value, row);
      var flag;
      if (value == 0) {
        flag = false;
      } else {
        flag = true;
      }
      return row.isover == flag;
    },
    findProjects() {
      this.$api.project
        .findProjects()
        .then(response => {
          console.log("工程:", response.data);
          this.tableData = response.data;
        })
        .catch(error => {
          console.log("获取工程：", error);
        });
    }
  },
  mounted: function() {
    this.findProjects();
  }
};
</script>

<style lang="less">
#table-block {
  width: 80%;
  margin: 50px auto;
  border-radius: 25px;
  padding: 0px 20px;
}
#table-head-block {
  width: 200px;
  font-size: 20px;
  margin: 20px auto;
  border-radius: 25px;
}
.el-table .success-row {
  background: #f0f9eb;
}
#add-img {
  // position: absolute;
  // top: 65px;
  // right: 40px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
